<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar 
      title="登录" 
      fixed 
      placeholder 
      @click-left="$router.back()" 
      @click-right="goRegister"
    >
      <!-- 左侧文本 -->
      <template #left>
        <div class="top-nav-bar-left-arrow">
          <van-icon name="arrow-left" color="#ee0a24" />
        </div>
      </template>
      <!-- 右侧文本 -->
      <template #right>
        <div class="top-nav-bar-right">
          注册
        </div>
      </template>
    </van-nav-bar>
    <!-- 美多商城logo -->
    <MeiduoLogo></MeiduoLogo>
    <!-- 登录账号密码输入框 -->
    <van-cell-group class="ipt-box" :border="false">
      <van-field 
        v-model="userAccount"
        type="text"
        label="账号" 
        placeholder="请输入账号/手机号" 
        :maxlength="userConstants.USER_ACCOUNT_LENGTH"
        left-icon="user-o"
        center
        class="ipt"
        clearable
      ></van-field>
      <van-field 
        v-model="userPassword"
        :type="isUserPasswordShow ? 'text' : 'password'"
        label="密码" 
        placeholder="请输入登录账号密码" 
        :maxlength="userConstants.USER_PASSWORD_MAX_LENGTH"
        left-icon="edit"
        center
        class="ipt"
        ref="userPassword"
        @blur="passwordIptBlur"
        clearable
      >
        <template #right-icon>
          <van-icon 
            name="closed-eye" 
            class="icon"
            v-show="!isUserPasswordShow"
            @click="changePasswordIsShow"
          />
          <van-icon 
            name="eye-o" 
            class="icon"
            v-show="isUserPasswordShow"
            @click="changePasswordIsShow"
          />
        </template>
      </van-field>
    </van-cell-group>
    <!-- 登录按钮 -->
    <van-button 
      color="linear-gradient(to right, #ff6034, #ee0a24)" 
      class="ipt"
      @click="login"
    >登录</van-button>
  </div>
</template>

<script>
import MeiduoLogo from '@/components/MeiduoLogo.vue'
import { CellGroup  } from 'vant'
import { Field } from 'vant' // 输入框

export default {
  name: 'Login',
  components: {
    MeiduoLogo,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
  },
  data() {
    return {
      userAccount: '', // 用户账号或手机号码
      userPassword: '', // 用户账号密码
      isUserPasswordShow: false, // 用户密码是否显示
    }
  },
  methods: {
    // 前往注册界面
    goRegister() {
      this.$router.push({ name: 'register' })
    },
    // 改变密码是否可视
    changePasswordIsShow() {
      this.isUserPasswordShow = !this.isUserPasswordShow
      this.$nextTick(()=>{
        this.$refs['userPassword'].focus()
      })
    },
    // 密码输入框失去焦点
    passwordIptBlur() {
      this.isUserPasswordShow = false  // 密码输入框密码不可视
    },
    // 登录
    login() {
      if (this.userAccount.length === 0) {
        this.$toast.fail('请输入账号/手机号')
        return
      }
      if (this.userPassword.length === 0) {
        this.$toast.fail('请输入账号密码')
        return
      }
      this.req.post(
        'user/login/',
        {
          userAccount: this.userAccount,
          userPassword: this.userPassword + '.' + this.userConstants.USER_PASSWORD_SECRET,
        }
      ).then((res)=>{
        if (res.data.mark === 1) {
          this.$toast.success(res.data.message)
          localStorage.setItem('token', res.data.data.token)
          // this.$router.replace({name: 'user'})
          this.$router.go(-2) // 回到登录前的页面
        } else {
          this.$toast.fail(res.data.message)
        }
      }, err=>{
        this.$toast.fail(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
// 顶部导航栏右侧文本样式
.top-nav-bar-right {
  font-size: 1.25rem;
}
// 输入框盒子样式
.ipt-box {
  margin: 10% 0 0;
  // padding: 1% 0;
}
// input样式
.ipt {
  margin: 5% 5%;
  height: 3.5rem;
  width: 90%;
  border: 1px solid #ee0a24;
  border-radius: 1.75rem;
}
// 输入框内图标样式
.icon {
  margin-left: 20%;
  font-size: 1.4rem;
}
</style>